/**
 * @author:linjiye
 * @date: 2025/1/3
 * @desc:
 **/

import {StyleSheet, Text, TextInput, View,Image} from 'react-native'
import React, {useEffect, useState} from 'react'
import FormTitle from "@/components/FormTitle";
import FcTextInput from "@/components/FcTextInput";
import FcSlider from "@/components/FcSlider";
import {useDispatch, useSelector} from "react-redux";
import {set_params} from "@/store/reducer/explosiveFission/explosiveFissionSlice";
import Loading from "@/components/Loading";

type Props = {}

const ResolveResult = (Props) => {

    const [aText,setAText] = useState('')
    const [bText,setBText] = useState('')
    const [cText,setCText] = useState('')
    const [FcSliderPSVal, setFcSliderPSVal] = useState(1)

    const [params,setParams] = useState({})

    const dispatch = useDispatch()
    let p = useSelector(state => state.explosiveFission.params)

    useEffect(() => {
        if(p){
            console.log(p,'00000');
            setParams(p)
            setAText(p.aText);
            setBText(p.bText);
            setCText(p.cText);
        }
    }, [p]);

    function handlePS(val){
        setFcSliderPSVal(val)

        dispatch(set_params({
            ...params,
            articlesNum: val
        }))
    }

    return (
        <View style={styles.container}>
            <FormTitle isLeftIcon textJB title='开头A'/>
            <FcTextInput multiline text={aText}
                         onChangeText={setAText}
                         height={160}
                         style={{marginTop: 0}}
                         positionEle={
                             <>
                                 {!aText &&  <Loading style={styles.loading} iconStyle={{width:50,height:50}}/>}
                             </>
                         }
                          />
            <FormTitle isLeftIcon textJB title='中间B'/>
            <FcTextInput multiline text={bText}
                         onChangeText={setBText}
                         height={160}
                         style={{marginTop: 0}}
                         positionEle={
                             <>
                                 {!bText &&  <Loading style={styles.loading} iconStyle={{width:50,height:50}}/>}
                             </>
                         }
            />
            <FormTitle isLeftIcon textJB title='结尾C'/>
            <FcTextInput multiline text={cText}
                         onChangeText={setCText}
                         height={160}
                         style={{marginTop: 0}}
                         positionEle={
                             <>
                                 {!cText &&  <Loading style={styles.loading} iconStyle={{width:50,height:50}}/>}
                             </>
                         }
            />
            <FormTitle title='输出篇数'
                       right={
                           <View style={styles.slider_wrap}>
                               <TextInput style={styles.slider_input} value={FcSliderPSVal + ''} onChangeText={handlePS}></TextInput>
                               <Text style={styles.slider_txt}>篇</Text>
                           </View>
                       }/>
            <FcSlider value={FcSliderPSVal} showMinMax onFcSlider={handlePS}/>
        </View>
    )
}

export default ResolveResult

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        borderRadius: 8,
        paddingHorizontal: 16,
        paddingBottom: 16,
        overflow: "hidden"
    },
    slider_wrap: {
        flexDirection: "row",
        alignItems: "center",
    },
    slider_input: {
        width: 56,
        height: 32,
        textAlign: "center",
        borderRadius: 8,
        backgroundColor: '#F1F2F4'
    },
    slider_txt: {
        marginLeft: 8,
        fontSize: 14,
        color: 'rgba(0,0,0,0.5)'
    },
    loading:{
        position:'absolute',
        right:0,
        top:0,
        zIndex:1000,
        backgroundColor:'#F1F2F4',
    }
})